<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" >
body{ margin:0; padding:0;}
.dialog { width: 300px; height: 200px; position:fixed; left:50%;top:50%; margin-top:-100px; margin-left:-150px; z-index: 30;box-shadow: 2px 2px 4px #ccc; background-color: #f1f1f1; border: solid 1px #aaa; border-radius: 4px; overflow: hidden; display: none; }
.dialog .title { font-size: 16px; font-weight: bold; color: #fff; padding: 6px; background-color: #404040; }
.dialog .close { width: 20px; height: 20px; margin: 3px; float: right; cursor: pointer; color: #fff; }
.pageCover { width: 100%; height: 100%; position: absolute; z-index: 10; background-color: #666; opacity: 0.5; display: none; }
</style>
<meta charset="utf-8">
</head>
<body>
<div id="pageCover" class="pageCover"></div>
<input type="button" value="打开对话框" onclick="openDialog();"/>
<div id="dlgTest" class="dialog"><span class="close">&times;</span>
    <div class="title">对话框标题栏</div>
    <div class="content">对话框内容框</div>
</div>
<script type="text/javascript">            
function EventTarget(){
    this.handlers={};
}
EventTarget.prototype={
	constructor:EventTarget,
	addHandler:function(type,handler){
		if(typeof this.handlers[type]=='undefined'){
			this.handlers[type]=new Array();
		}
		this.handlers[type].push(handler);
	},
	removeHandler:function(type,handler){
		if(this.handlers[type] instanceof Array){
			var handlers=this.handlers[type];
			for(var i=0,len=handlers.length;i<len;i++){
				if(handler[i]==handler){
					handlers.splice(i,1);
					break;
				}
			}
		}
	},
	trigger:function(event){
		if(!event.target){
			event.target=this;
		}
		if(this.handlers[event.type] instanceof Array){
			var handlers=this.handlers[event.type];
			for(var i=0,len=handlers.length;i<len;i++){
				handlers[i](event);
			}
		}
	}
}

function extend(subType,superType){
	var prototype=Object(superType.prototype);
	prototype.constructor=subType;
	subType.prototype=prototype;
}

function Dialog(id){
	EventTarget.call(this)
	this.id=id;
	var that=this;
	document.getElementById(id).children[0].onclick=function(){
		that.close();
	}
}
extend(Dialog,EventTarget);

Dialog.prototype.show=function(){
	var dlg=document.getElementById(this.id);
	dlg.style.display='block';
	dlg=null;
	this.trigger({type:'open'});
}
Dialog.prototype.close=function(){
	var dlg=document.getElementById(this.id);
	dlg.style.display='none';
	dlg=null;
	this.trigger({type:'close'});
}
function openDialog(){
    var dlg=new Dialog('dlgTest');
    dlg.addHandler('close',function(){
        document.getElementById('pageCover').style.display='none';
    });
    dlg.addHandler('open',function(){
        document.getElementById('pageCover').style.display='block';
    });	
    dlg.show();
}
</script>
</body> 
</html>
